<template>
	<view class="container">
		<div class="tobg">
			<image src="/static/img/agent/addbg.png" mode=""></image>
		</div>
		<div class="equipment-list">
			<div class="equip-item">
				 <uni-data-checkbox multiple v-model="deviceIds" :localdata="deviceList" @change="change"></uni-data-checkbox>
			</div>
		</div>
		<view class="btn">
			<button type="default" @click="submit">完成</button>
		</view>
	</view>
</template>

<script>
	import { getDeviceList } from '../../../api/api.js'
	export default {
		data() {
			return {
				deviceIds: [],
				deviceList: []
			}
		},
		onLoad() {
			this.getMyDevice();
		},
		methods: {
			getMyDevice() {
				getDeviceList({}).then(res => {
					this.deviceList = res.data.map(item => {
						return {
							value: item.device_id,
							text: item.name
						}
					})
				})
			},
			change() {
				console.log(this.deviceList, 'deviceIds');
			},
			submit() {
				const result = this.deviceList.filter(item => this.deviceIds.includes(item.value));
				// console.log(result, 'resultresult');
				uni.navigateTo({
					url:'/pages/agent/user/operate-add?ids=' + JSON.stringify(this.deviceIds) + '&devlist=' + JSON.stringify(result)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	background: #F7F7F7;
	.tobg{
		width: 100%;
		height: 204px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.equipment-list{
		width: 80%;
		// background: url('../../../static/img/agent/formbg.png') no-repeat center;
		background: #fff;
		border-radius: 8px;
		height: 100vh;
		background-size: 100% 100%;
		position: absolute;
		top: 20px;
		left: calc((20% - 52px) / 2);
		padding: 26px;
		.equip-item{
			height: 100vh;
			overflow: auto;
		}
	}
	.btn {
		width: calc(100% - 60upx);
		margin: 40upx auto;
		height: 90upx;
		position: fixed;
		left: 15px;
		bottom: 10px;
		button {
			width: 100%;
			height: 100%;
			height: 90upx;
			background: linear-gradient( 311deg, #93A4FB 0%, #2F9AFE 100%);
			box-shadow: 0px 2px 6px 0px rgba(20,135,255,0.4);
			border-radius: 22px;
			color: #FFFFFF;
		}
	}
}
</style>
<style>
	::v-deep .uni-data-checklist .checklist-group .checklist-box{
		width: 100%;
		height: 44px;
		border-radius: 28px !important;
		border: 1px solid #F0F0F0;
		padding: 0 30px;
		display: flex !important;
		flex-direction: row-reverse !important; /* 反向排列 */
		justify-content: space-between !important; /* 两端对齐 */
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner{
		margin-left: auto;
	}
</style>
